import { Carousel } from 'antd';
import style from './swiper.less'
import { useHistory } from "react-router-dom";

import { GetDateToNewData } from '@/utils';

const Swiper = ({ ImgList = [] }) => {
  const History = useHistory();
  return (
    <div className={style.swiper}>
      <Carousel autoplay>
        {
          ImgList && ImgList.length > 0 ? ImgList.map((item: any, index) => {
            return (
              <div key={index} className={style.img}>
                <div className={style.small}>
                  <div className={style.swiperText}>
                    <h3 >{item.title}</h3>
                    <div className={style.text}>{GetDateToNewData(new Date(item.publishAt).getTime())}&ensp;<span>·</span>&ensp;<span>{item.views} 次阅读</span></div>
                  </div>
                  <div className={style.imgboxs}>
                    <div>
                      {
                        item.cover
                          ? <img className={style.contentStyle} src={item.cover} alt="" onClick={() => {
                            History.push("/article/" + item.id);
                            { item.views + 1 }
                          }} />
                          : null
                      }
                    </div>
                  </div>
                </div>
              </div>
            )
          }) : <div> 暂无图片</div>
        }
      </Carousel>
    </div>
  );
};

export default Swiper;